{% extends 'base.html' %}

{% block title %}交易数据明细 - 区块链交易行为特征分析与可视化系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="fas fa-exchange-alt me-2"></i>交易数据明细</h1>
</div>

<!-- 搜索和过滤 -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" action="{{ url_for('transactions') }}" class="row g-3">
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-text">地址</span>
                    <input type="text" class="form-control" name="address" placeholder="输入发送方或接收方地址" value="{{ request.args.get('address', '') }}">
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <span class="input-group-text">最小金额</span>
                    <input type="number" step="0.0001" class="form-control" name="min_value" placeholder="最小金额" value="{{ request.args.get('min_value', '') }}">
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <span class="input-group-text">最大金额</span>
                    <input type="number" step="0.0001" class="form-control" name="max_value" placeholder="最大金额" value="{{ request.args.get('max_value', '') }}">
                </div>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="fas fa-search me-2"></i>搜索
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 交易数据表格 -->
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="fas fa-table me-2"></i>交易列表</h5>
    </div>
    <div class="card-body">
        {% if transactions %}
        <div class="table-responsive">
            <table class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th>交易哈希</th>
                        <th>区块高度</th>
                        <th>时间</th>
                        <th>发送方</th>
                        <th>接收方</th>
                        <th>金额</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tx in transactions %}
                    <tr>
                        <td title="{{ tx.tx_hash }}">{{ tx.tx_hash[:10] }}...</td>
                        <td>{{ tx.block_height }}</td>
                        <td>{{ tx.timestamp|timestamp_to_date }}</td>
                        <td title="{{ tx.from_address }}">{{ tx.from_address[:10] }}...</td>
                        <td title="{{ tx.to_address }}">{{ tx.to_address[:10] }}...</td>
                        <td>{{ tx.value }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if page > 1 %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('transactions', page=page-1, address=request.args.get('address', ''), min_value=request.args.get('min_value', ''), max_value=request.args.get('max_value', '')) }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% endif %}
                
                {% for p in range((1|max_value(page-2)), ((total_pages+1)|min_value(page+3))) %}
                <li class="page-item {{ 'active' if p == page else '' }}">
                    <a class="page-link" href="{{ url_for('transactions', page=p, address=request.args.get('address', ''), min_value=request.args.get('min_value', ''), max_value=request.args.get('max_value', '')) }}">{{ p }}</a>
                </li>
                {% endfor %}
                
                {% if page < total_pages %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('transactions', page=page+1, address=request.args.get('address', ''), min_value=request.args.get('min_value', ''), max_value=request.args.get('max_value', '')) }}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i>暂无交易数据
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 注意：时间戳已通过服务器端的Jinja2过滤器处理，不需要客户端JavaScript处理
</script>
{% endblock %}